<template>
	<!-- 该组件用于上传视频和预览视频 从工程维保模块抽离出来 -->
	<view>
		<view :class="showTitle ?  'photo-list' : 'photo-list-no-mr'">
			<view class="photo-top" v-if="showTitle">
				<view class="photo-text" :class="required ? 'red-tips' : ''">{{ titleText }}</view>
			</view>
			<u-upload @click.native="clickMedias" accept="video" :disabled="true" :maxCount="9" multiple
				:previewFullImage="true">
				<view style="width: calc(100vw - 40upx);">
					<view v-for="(item, index) in videoFileList" :key="index" style="display: inline-block;">
						<view class="video-item"
							style="background: #f4f5f7; width: 80px; height: 80px; border-radius: 2px; margin: 0 8px 8px 0; overflow: hidden; position: relative;">
							<view @click.stop="handleClickPreview(item)"
							class="upload-video-item"
								style="background: #f4f5f7; width: 80px; height: 80px; border-radius: 2px; margin: 0 8px 8px 0; display: flex; justify-content: center; align-items: center; flex-direction: column;">
								<u-icon name="play-right-fill" color="#80cbf9" size="26"></u-icon>
								<text style="color: #9d9ea0;font-size: 13px;">视频</text>
								<text v-if="item.uploadStatus">上传中</text>
							</view>
							<view v-if="!disabled" @click.stop="closeFile(item,index)"
								style="position: absolute; top: 0; right: 0; background: #373737; border-radius: 0 0 0 50px; padding: 0 0 12upx 12upx;">
								<u-icon name="close" color="#fff" size="12"></u-icon>
							</view>
						</view>
					</view>
					<view v-if="videoFileList.length < 9 && !disabled" class="video-item"
						style="display: inline-block; vertical-align: top; background: #f4f5f7; width: 80px; height: 80px; border-radius: 2px; margin: 0 8px 8px 0;">
						<view style="display: flex; justify-content: center; align-items: center; height: 100%;">
							<u-icon name="camera-fill" color="#d3d4d6" size="26" />
						</view>
					</view>
				</view>
			</u-upload>
			<!-- 视频预览 -->
			<view v-if="playVideoSrc" @click="closePlayVideoSrc" 
				style="width: 100vw; height: 100vh; background: #2c2c2c; position: fixed; top: 0; left: 0; z-index: 100;">
				<template v-if="isBlob">
					<!-- #ifdef MP-WEIXIN -->
					<video @click.stop :src="playVideoSrc" controls :show-fullscreen-btn="false" autoplay
						style="position: absolute; top: 50%; width: 100%; height: 80%; transform: translateY(-50%);"></video>
					<!-- #endif -->
					<!-- #ifdef APP || H5 -->
					<view @click.stop v-html="videoHtml()"></view>
					<!-- #endif -->
				</template>
				<template v-else>
					<video @click.stop :src="playVideoSrc" controls :show-fullscreen-btn="false" autoplay
						style="position: absolute; top: 50%; width: 100%; height: 80%; transform: translateY(-50%);"></video>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"commonVideoUpload",
		data() {
			return {
				
			};
		},
		props:{
			videoFileList:{
				type:Array,
				require:true,
				default:() => []
			},
			playVideoSrc:{
				type:String,
				require:true,
				default:''
			},
			showTitle:{
				type:Boolean,
				default:true
			},
			titleText:{
				type:String,
				default:'病害视频'
			},
			disabled: {
				type: Boolean,
				default: false
			},
			isBlob: {
				type: Boolean,
				default: false
			},
			required: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			clickMedias() {
				this.$emit('clickMedias')
			},
			handleClickPreview(item) {
				this.$emit('handleClickPreview', item)
			},
			closePlayVideoSrc(){
				this.$emit('closePlayVideoSrc')
			},
			closeFile(item, index) {
				this.$emit('closeFile',item, index)
			},
			videoHtml() {
				return `<video src="${this.playVideoSrc}" autoplay controls="controls" width="100%" show-fullscreen-btn="false" height="80%" style="position: absolute; top: 50%; transform: translateY(-50%);"></></video>`
			}
		}
	}
</script>

<style scoped lang="scss">
.photo-list {
	width: 90%;
	margin-left: 40rpx;

	.photo-top {

		display: flex;
		height: 100rpx;
		justify-content: space-between;

		.photo-text {
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #445469;
			line-height: 100rpx;
		}
		.photo-text.red-tips::before {
			content: "*";
			color: #ff4646;
			font-size: 16px;
			line-height: 29px;
		}
	}
}
.photo-list-no-mr {
	margin-left: 0;
}
.video-class /deep/ .u-upload__wrap {
	flex-direction: column !important;
}
</style>